<template>
    <div class="page-tools" :style="{ transform: 'translate(' + translateXValue + ', ' + translateYValue + ')' }">
        <el-row type="flex" justify="pace-around" align="middle">
            <el-col>
                <!-- 左边 -->
                <div class="before">
                    <slot name="before">
                        <router-link to="/">
                            <img src="@/assets/images/log.png" :style="{ marginLeft: distance }">
                        </router-link>

                    </slot>
                </div>
            </el-col>
            <!-- 中间 -->
            <el-col>
                <el-row type=" flex" justify="center" align="middle">
                    <slot name="middle">
                        <el-input placeholder="请输入内容">
                            <el-button type="primary" slot="append" class="el-icon-search"></el-button>
                        </el-input>
                    </slot>
                </el-row>
            </el-col>

            <el-col>
                <el-row type=" flex" justify="end" align="middle" style="margin-left: 280px;">
                    <slot name="after">
                        <el-button type="primary" plain @click="$router.push('/ordercenter')"> <i style="color: #4d83ff;"
                                class="iconfont icon-zhijian-gray "></i>
                            {{ $t('toproof.ordercenter') }} </el-button>
                    </slot>
                </el-row>
            </el-col>
            <!-- 右边 -->
        </el-row>
    </div>
</template>

<script>

export default {

    props: {
        showBefore: {//电子商城隐藏显示
            type: Boolean,
            default: false
        },
        distance: {//电子商城位置
            type: String,
            default: '60px'
        },
        translateXValue: {
            type: String,
            default: '0px'
        },
        translateYValue: {
            type: String,
            default: '0px'
        }

    },
}
</script>

<style lang="less" scoped>
.page-tools {
    margin: 10px 0;

    .before {
        line-height: 34px;
        display: inline-block;
        padding: 0px 10px;
        border-radius: 3px;
    }
}

/deep/.el-input-group__append button.el-button {
    width: 80px;
    color: #ffffff;
    border: 1px solid #4d79ff;
    background-color: #4d79ff;
    background-image: linear-gradient(160deg, #4d79ff 0%, #4d94ff 100%);
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
}
</style>